<!--  frame 模板 -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>购物车</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css" />

	<style>
		body {
			background-color: #F8F8F8;
		}

		.wrap {
			margin-top: 0.20rem;
			margin-bottom: 1rem;
			padding-top: 0.30rem;
			background: #fff;
		}

		.section {
			display: flex;
			align-items: center;
			background: #fff;
			padding-bottom: 0.40rem;
		}

		.tick {
			width: 0.92rem;
			text-align: center;
		}

		.tick_box {
			width: 0.36rem;
			height: 0.36rem;
			line-height: 0.36rem;
			margin: 0 auto;
			border-radius: 50%;
		}

		.border {
			border: 0.01rem solid #999;
		}

		.check {
			width: 0.38rem;
			height: 0.38rem;
			font-size: 0.38rem;
			color: #ff502d;
		}

		.shop_img {
			height: 1.70rem;
			width: 1.70rem;
			border-radius: 0.10rem;
		}

		.right_box {
			flex: auto;
			height: 1.70rem;
			display: flex;
			flex-direction: column;
			padding-left: 0.30rem;
		}

		.shop_title,
		.price_title,
		.price {
			height: 0.26rem;
			line-height: 0.26rem;
			font-size: 0.28rem;
			color: #333;
		}

		.shop_color {
			height: 0.23rem;
			line-height: 0.23rem;
			font-size: 0.24rem;
			color: #999;
			margin-top: 0.25rem;
		}

		.shop_bottom {
			height: 0.45rem;
			display: flex;
			align-items: center;
			margin-top: 0.45rem;
			padding-right: 0.3rem;
		}

		.price_box {
			flex: auto;
			display: flex;
		}

		.pri_color {
			color: #ff502d;
		}

		.num_box {
			height: 0.45rem;
			display: flex;
			align-items: center;
			margin-right: 0.35rem;
			border: 1px solid #f00;
		}

		.num_input {
			width: 0.60rem;
			text-align: center;
			font-size: 0.28rem;
			color: #333;
		}

		.foot {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1rem;
			display: flex;
			align-items: center;
			background: #fff;
			border-top: 0.01rem solid #e5e5e5;
		}

		.foot_l {
			flex: auto;
			display: flex;
			align-items: center;
			padding-left: 0.30rem;
		}

		.foot_r {
			display: flex;
			padding-right: 0.30rem;
			align-items: center;
		}

		.select {
			width: 0.36rem;
			height: 0.36rem;
			line-height: 0.36rem;
			border-radius: 50%;
			border: 0.01rem solid #999;
		}

		.all_select {
			font-size: 0.24rem;
			color: #999;
			margin-left: 0.20rem;
		}

		.settle_account {
			width: 2.00rem;
			height: 0.70rem;
			line-height: 0.70rem;
			text-align: center;
			font-size: 0.28rem;
			color: #fff;
			background: #ff502d;
			border-radius: 0.35rem;
			margin-left: 0.30rem;
		}

		.bg {
			opacity: 0.8;
		}

		hhEmpty {
			position: absolute;
			top: 20%;
			width: 100%;
		}
	</style>
</head>

<body>
	<div class="content app" v-cloak>
		<div class="wrap" v-if="products.length">
			<div class="section" v-for="(item,index) in products" :key="index">
				<div class="tick">
					<div class="tick_box border" @click="CheckItem(index)">
						<div class="iconfont iconxuanze check" v-if="item.isChecked"></div>
					</div>
				</div>
				<img class="shop_img" :src="item.image_center+'?imageView2/1/w/150/h/150'"></img>
				<div class="right_box">
					<div class="shop_title" style="padding-top: 0.2rem;">{{item.product_name}}</div>
					<div class="shop_color">{{item.sku_txt}}</div>
					<div class="shop_bottom">
						<div class="price_box">
							<div class="price_title">价格：</div>
							<div class="price pri_color">¥{{item.pay}}</div>
						</div>
						<hh-counter :num.sync="item.nums" min="0" :max="item.stock_count" theme="cart" @delete="NumDelete(index)" @change="NumChange"></hh-counter>
					</div>
				</div>
			</div>
		</div>
		<!-- <hhEmpty v-else>购物车空空如也</hhEmpty> -->
		<div v-else class="no-data">
			<img class="image" src="../image/nodata/yhj.png">
			<div class="title">购物车空空如也</div>
			<div class="content">请行动起来，去商城逛逛吧!</div>
		</div>
		<div class="foot">
			<div class="foot_l">
				<div class="select" @click="CheckAll">
					<div class="iconfont iconxuanze check" v-if="isCheckAll"></div>
				</div>
				<div class="all_select">全选</div>
			</div>
			<div class="foot_r">
				<div class="price_box">
					<div class="price_title">价格：</div>
					<div class="price pri_color">¥{{sum}}</div>
				</div>
				<div class="settle_account" @click="pay">去结算</div>
			</div>
		</div>
	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
	window.addEventListener("apiready", function() {
		index()
	});

	function index() {
		var vm = new Vue({
			el: ".app",
			data: {
				products: [],
				isCheckProduct: [],
				isCheckAll: true,
				sum: 0
			},
			mounted: function() {
				this.shop_cart()
				api.addEventListener({
				    name: 'evt_CartPay'
				}, function(ret, err){
				  vm.shop_cart()
				});

			},
			methods: {

				//购物车
				shop_cart: function() {
					AjaxSafe({
						url: '/xapp/app/product/myCart',
						success: function(ret) {
							vm.products = (ret.data || []).map(function(item) {
								item.isChecked = true;
								item.pay = item.skuid ? item.unit_price : item.price;
								return item
							})
							vm.isCheckProduct=vm.products
							vm.PriceCalc();
						}
					})
				},

				// 全选处理
				CheckAll: function() {
					vm.isCheckAll = !vm.isCheckAll;
					vm.products.forEach(function(product) {
						product.isChecked = vm.isCheckAll;
					});
					//vm.isCheckAll = vm.isCheckAll;
					vm.isCheckProduct = vm.products;

					vm.PriceCalc();
				},
				// 单选选择处理
				CheckItem: function(index) {
					var isCheckAll = true;
					var idx = index,
						products = [];
					vm.products[idx].isChecked = !vm.products[idx].isChecked;
					vm.products.forEach(function(product) {
						if (!product.isChecked) {
							isCheckAll = false;
						} else
							products.push(product)
					});
					vm.isCheckAll = isCheckAll;
					vm.isCheckProduct = products

					vm.PriceCalc();
				},


				// 数量变化
				NumChange() {
					vm.PriceCalc();
				},
				//商品删除
				NumDelete: function(index) {

					api.confirm({
						title: '信息确认',
						msg: '确定要删除当前商品吗？',
						buttons: ['确定', '取消']
					}, function(ret, err) {
						if (ret.buttonIndex == 1) {
							var idx = index;
							var id = vm.products[idx].cart_id;

							AjaxSafe({
								url: "/xapp/app/product/delCart",
								data: {
									cart_id: id
								},
								success: function(ret) {
									if (ret.state) {
										var products=[];
										vm.products.splice(idx, 1);
										vm.products.forEach(function(product) {
											if (product.isChecked) {
												products.push(product)
											}
										});
										vm.isCheckProduct = products
										vm.PriceCalc();
										api.sendEvent({name: 'evt_CartChange'});
										hhPanel.msg(ret.msg);
									} else
										hhPanel.msg(ret.msg);
								}
							});
						} else {
							hhPanel.msg('已经取消删除该商品')
						}
					});

				},

				// 价格处理
				PriceCalc: function() {
					vm.sum = vm.products.reduce(function(prev, next) {
						return prev += next.isChecked ? next.nums * next.pay : 0;
					}, 0)
				},

				//支付
				pay: function() {
					if (!vm.products.length) {
						hhPanel.msg("购物车内没有商品");
						return;
					}
					if (vm.sum == 0) {
						hhPanel.msg("没有选中任何商品");
						return;
					}

					AjaxSafe({
						url: "/xapp/order/buy",
						data: {
							products: vm.isCheckProduct.map(function(item) {
								return {
									id: item.id,
									skuid: item.sku_id,
									num: item.nums
								};
							})
						},
						success: function(ret) {
							if (ret.state) {
								order_create(ret.data)
							} else
								hhPanel.msg(ret.msg);
						}
					});
				}
			}


		})

	}
</script>

</html>
